<script setup lang="ts">
// defineProps<{ msg: string }>();
</script>

<template>
    <div class="footer">
        <div class="main">
            <div class="section">
                <h3>联系我们</h3>
                <div class="section-info">
                    <span>电话：123-456-7890</span>
                    <span>邮箱：info@company.com</span>
                    <span>地址：某某市某某区某某街道123号</span>
                </div>
            </div>
            <div class="section">
                <h3>快速链接</h3>
                <div class="section-info">
                    <router-link to="/">首页</router-link>
                    <router-link to="/about">关于我们</router-link>
                    <router-link to="/products">产品服务</router-link>
                    <router-link to="/news">新闻中心</router-link>
                    <router-link to="/contact">联系我们</router-link>
                </div>
            </div>
        </div>
        <div class="copyright">© 2024 企业网站. All rights reserved.</div>
    </div>
</template>

<style scoped>
.footer {
    background-color: #2c3e50;
    color: #fff;
    padding: 15px 20px;
    width: 100%;
}

.main {
    max-width: 1200px;
    margin: 0 auto;
}

.section {
    padding: 15px 0;

    h3 {
        font-size: 1.1rem;
        font-weight: 600;
    }
}

.section-info {
    padding-top: 15px;

    span {
        padding-right: 36px;
    }

    a {
        padding-right: 36px;
        color: #fff;
        text-decoration: none;
        margin: 0 0 8px 0;
        font-size: 0.95rem;
        transition: color 0.2s;

        &:hover {
            color: #64b5f6;
        }
    }
}

.copyright {
    text-align: center;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .footer-content {
        flex-direction: row;
        justify-content: space-around;
        gap: 20px;
        padding: 0 10px;
    }

    .footer-section {
        text-align: left;
        width: auto;
    }

    .footer-section a {
        margin: 0 0 8px;
    }
}
</style>
